<template>
    <div class="shopcar-container">
         <div class="goods-list">
           <div class="mui-card"  v-for="(item,i) in goodslist" :key="item.id">
               <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                         <mt-switch v-model="$store.getters.getGoodsSelected[item.id]"
                          @change="selectedChange(item.id,$store.getters.getGoodsSelected[item.id])">
                    </mt-switch>
                         <img :src="item.thumb_path" alt="">
                         <div class="info">
                              <h1>{{item.title}}</h1>
                              <p>
                                   <span class="price">￥{{item.sell_price}}</span>
                                   <numbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
                                   <a href="#" @click.prevent = "remove(item.id,i)">删除</a>
                              </p>
                         </div>
                    </div>
               </div>
          </div>

          <div class="mui-card">
               <div class="mui-card-content">
                    <div class="mui-card-content-inner jiesuan">
                        <div class="left">
                            <p>总计（不含运费）</p>
                            <p>
                               已勾选商品：<span class="red">{{$store.getters.getGoodsCountAndAmount.count}}</span> 件&nbsp;&nbsp;
                               总价 ￥<span class="red">{{$store.getters.getGoodsCountAndAmount.amount}}</span>
                              </p>
                        </div>
                        
                        <mt-button type="danger">去结算</mt-button>
                        

                    </div>
               </div>
          </div>
     </div>

     <p>{{ $store.getters.getGoodsSelected }}</p>
    </div>
 </template>
 
 <script>
 import {Toast } from 'mint-ui'
 import numbox from '../subcomponent/shopcar_numbox.vue'

 export default {
      data(){
          return{
              goodslist:[] 
          }
      },
      created(){
          this.getGoodsList();
      },
     methods:{
          getGoodsList(){
             var idArr = [];
             //  从car中获取 商品id 并且拼接起来
             this.$store.state.car.forEach(item => idArr.push(item.id))

             if(idArr.length <=0){   //如果获取的商品id为空  直接返回
               return ;
             }

          this.$http.get("api/goods/getshopcarlist/"+idArr.join(",")).then(
               result =>{
                    if(result.body.status == 0){
                         this.goodslist = result.body.message;
                    }
                    else{
                         Toast("获取购物车数据失败......")
                    }
               }
          )
          },
          remove(id,index){
               this.goodslist.splice(index,1);
               this.$store.commit("removeFromCar",id)
          },
          selectedChange(id,val){
               this.$store.commit("uodateGoodsSelected",{id,selected:val})
          }
     },
    components:{
         numbox
    },
    
 }
 </script>
 
 <style lang="scss" scoped>
 .goods-list{
     background-color: #eee;
 }
 .goods-list img{
      height: 60px;
      width: 60px;
 }

 .goods-list h1{
      font-size:14px;
 }

 .goods-list .price{
      color:red;
      font-size: 16px;
      font-weight: bold;
 }

 .goods-list .mui-card-content-inner{
     display: flex;
     align-items: center;
}
.goods-list .info{
     display: flex;
     flex-direction: column;
     justify-content: space-between;
}

.left .red{
     color:red;
     font-size: 16px;
     font-weight: bold;
}

.jiesuan{
     display: flex;
     justify-content: space-between;
}

 </style>